<!-- 中隔线样式 -->
<template>
    <el-collapse modelValue="1">
        <el-collapse-item title="中隔线样式" name="1">
            <layout-pane label="效果">
                <div>
                    <si-select
                        v-model="widget.widgetData.eles.customFeature.CellBorderStyle"
                        :list="borderStyles"
                        label="样式"
                        style="width: 120px"
                    />
                    <si-input-number
                        v-model="widget.widgetData.eles.customFeature.CellBorderWidth"
                        :min="0"
                        label="粗细"
                        unit="px"
                        style="margin-left: 12px"
                    />
                </div>

                <div style="margin-top: 10px">
                    <si-color-picker
                        v-model="widget.widgetData.eles.customFeature.CellBorderColor"
                        label="颜色"
                        show-alpha
                    />
                </div>
            </layout-pane>
        </el-collapse-item>
    </el-collapse>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import {
    SiInputNumber,
    SiSelect,
    SiColorPicker
} from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'LayoutVesselCellStyle',
    components: {
        LayoutPane,
        SiInputNumber,
        SiSelect,
        SiColorPicker
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        // 边框样式列表
        const borderStyles = computed(() => {
            return [
                { label: '无', value: 'none' },
                { label: '实线', value: 'solid' },
                { label: '点线', value: 'dotted' },
                { label: '虚线', value: 'dashed' }
            ]
        })

        return {
            widget,
            widgetType,
            borderStyles
        }
    }
})
</script>